<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图标转换工具 - 多平台图标生成器</title>
  <style>
    :root {
      --primary-color: #4a6ee0;
      --secondary-color: #6c757d;
      --success-color: #28a745;
      --light-color: #f8f9fa;
      --dark-color: #343a40;
      --border-radius: 8px;
      --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background-color: #f5f7fa;
      color: #333;
      line-height: 1.6;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    header {
      background-color: white;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      padding: 20px 0;
    }

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .logo-icon {
      font-size: 24px;
      color: var(--primary-color);
    }

    .logo h1 {
      font-size: 24px;
      font-weight: 600;
    }

    .main-content {
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 30px;
      margin: 30px 0;
    }

    .converter-card {
      background-color: white;
      border-radius: var(--border-radius);
      box-shadow: var(--box-shadow);
      padding: 30px;
    }

    .ad-space {
      background-color: white;
      border-radius: var(--border-radius);
      box-shadow: var(--box-shadow);
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: fit-content;
    }

    .ad-label {
      font-size: 12px;
      color: var(--secondary-color);
      margin-bottom: 10px;
    }

    .ad-placeholder {
      width: 100%;
      height: 250px;
      background-color: #e9ecef;
      border: 1px dashed #ced4da;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--secondary-color);
      border-radius: 4px;
    }

    .section-title {
      font-size: 20px;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eaeaea;
    }

    .platform-selection {
      margin-bottom: 30px;
    }

    .platform-options {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 15px;
    }

    .platform-option {
      border: 2px solid #eaeaea;
      border-radius: var(--border-radius);
      padding: 15px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .platform-option:hover {
      border-color: var(--primary-color);
      transform: translateY(-3px);
    }

    .platform-option.selected {
      border-color: var(--primary-color);
      background-color: rgba(74, 110, 224, 0.05);
    }

    .platform-icon {
      font-size: 32px;
      margin-bottom: 10px;
    }

    .platform-name {
      font-weight: 600;
      margin-bottom: 5px;
    }

    .platform-desc {
      font-size: 12px;
      color: var(--secondary-color);
    }

    .file-upload {
      margin-bottom: 30px;
    }

    .upload-area {
      border: 2px dashed #ced4da;
      border-radius: var(--border-radius);
      padding: 40px 20px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
      background-color: #f8f9fa;
    }

    .upload-area:hover {
      border-color: var(--primary-color);
      background-color: rgba(74, 110, 224, 0.03);
    }

    .upload-icon {
      font-size: 48px;
      color: var(--primary-color);
      margin-bottom: 15px;
    }

    .upload-text {
      margin-bottom: 15px;
    }

    .upload-button {
      background-color: var(--primary-color);
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
      font-weight: 500;
      transition: background-color 0.3s ease;
    }

    .upload-button:hover {
      background-color: #3a5ed0;
    }

    .file-input {
      display: none;
    }

    .file-info {
      margin-top: 20px;
      display: none;
    }

    .file-preview {
      display: flex;
      gap: 20px;
      align-items: center;
      margin-top: 15px;
    }

    .preview-image {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 4px;
      border: 1px solid #eaeaea;
    }

    .file-details {
      flex: 1;
    }

    .file-name {
      font-weight: 600;
      margin-bottom: 5px;
    }

    .file-size {
      font-size: 14px;
      color: var(--secondary-color);
    }

    .remove-file {
      color: #dc3545;
      cursor: pointer;
      font-size: 18px;
    }

    .convert-button {
      background-color: var(--success-color);
      color: white;
      border: none;
      padding: 12px 30px;
      border-radius: 4px;
      cursor: pointer;
      font-weight: 500;
      font-size: 16px;
      width: 100%;
      transition: background-color 0.3s ease;
    }

    .convert-button:hover {
      background-color: #218838;
    }

    .convert-button:disabled {
      background-color: #6c757d;
      cursor: not-allowed;
    }

    .result-section {
      display: none;
      margin-top: 30px;
      text-align: center;
      padding: 20px;
      background-color: #f8f9fa;
      border-radius: var(--border-radius);
    }

    .result-icon {
      font-size: 48px;
      color: var(--success-color);
      margin-bottom: 15px;
    }

    .download-button {
      background-color: var(--primary-color);
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
      font-weight: 500;
      margin-top: 15px;
      text-decoration: none;
      display: inline-block;
    }

    footer {
      background-color: var(--dark-color);
      color: white;
      padding: 30px 0;
      margin-top: 50px;
    }

    .footer-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .footer-links {
      display: flex;
      gap: 20px;
    }

    .footer-links a {
      color: #adb5bd;
      text-decoration: none;
      transition: color 0.3s ease;
    }

    .footer-links a:hover {
      color: white;
    }

    @media (max-width: 992px) {
      .main-content {
        grid-template-columns: 1fr;
      }

      .ad-space {
        display: none;
      }
    }

    @media (max-width: 576px) {
      .platform-options {
        grid-template-columns: 1fr;
      }

      .header-content {
        flex-direction: column;
        gap: 10px;
      }

      .footer-content {
        flex-direction: column;
        gap: 15px;
        text-align: center;
      }
    }
  </style>
</head>

<body>
  <header>
    <div class="container">
      <div class="header-content">
        <div class="logo">
          <div class="logo-icon">🖼️</div>
          <h1>图标转换工具</h1>
        </div>
        <div class="nav-links">
          <a href="#">首页</a>
          <a href="#">使用说明</a>
          <a href="#">关于我们</a>
        </div>
      </div>
    </div>
  </header>

  <div class="container">
    <div class="main-content">
      <div class="converter-card">
        <h2 class="section-title">创建多平台图标</h2>

        <div class="platform-selection">
          <h3>选择目标平台</h3>
          <div class="platform-options">
            <div class="platform-option selected" data-platform="win">
              <div class="platform-icon">🪟</div>
              <div class="platform-name">Windows</div>
              <div class="platform-desc">ICO格式 | 16x16 - 256x256</div>
            </div>
            <div class="platform-option" data-platform="mac">
              <div class="platform-icon">🍎</div>
              <div class="platform-name">Mac OS</div>
              <div class="platform-desc">PNG格式 | 16x16 - 1024x1024</div>
            </div>
            <div class="platform-option" data-platform="linux">
              <div class="platform-icon">🐧</div>
              <div class="platform-name">Linux</div>
              <div class="platform-desc">PNG格式 | 32x32 - 256x256</div>
            </div>
          </div>
        </div>

        <div class="file-upload">
          <h3>上传图片</h3>
          <div class="upload-area" id="uploadArea">
            <div class="upload-icon">📁</div>
            <div class="upload-text">拖放图片文件到此处，或点击上传</div>
            <button class="upload-button">选择文件</button>
            <input type="file" id="fileInput" class="file-input" accept=".png,.jpg,.jpeg,.bmp">
          </div>

          <div class="file-info" id="fileInfo">
            <div class="file-preview">
              <img id="previewImage" class="preview-image" src="" alt="预览">
              <div class="file-details">
                <div class="file-name" id="fileName"></div>
                <div class="file-size" id="fileSize"></div>
              </div>
              <div class="remove-file" id="removeFile">✕</div>
            </div>
          </div>
        </div>

        <button class="convert-button" id="convertButton" disabled>开始转换</button>

        <div class="result-section" id="resultSection">
          <div class="result-icon">✅</div>
          <h3>转换完成！</h3>
          <p>您的图标已成功转换，现在可以下载。</p>
          <a href="#" class="download-button" id="downloadLink">下载图标文件</a>
          <div id="downloadContainer"></div>
          <p style="margin-top: 15px; font-size: 14px; color: var(--secondary-color);">下载链接将在30分钟后失效</p>
        </div>
      </div>

      <div class="ad-space">
        <div class="ad-label">广告</div>
        <div class="ad-placeholder">
          广告位招租
        </div>
      </div>
    </div>
  </div>

  <footer>
    <div class="container">
      <div class="footer-content">
        <div class="copyright">
          © 2023 图标转换工具 - 保留所有权利
        </div>
        <div class="footer-links">
          <a href="#">隐私政策</a>
          <a href="#">使用条款</a>
          <a href="#">联系我们</a>
        </div>
      </div>
    </div>
  </footer>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      // 平台选择
      const platformOptions = document.querySelectorAll('.platform-option');
      let selectedPlatform = 'win';
      
      platformOptions.forEach(option => {
        option.addEventListener('click', function () {
          platformOptions.forEach(opt => opt.classList.remove('selected'));
          this.classList.add('selected');
          selectedPlatform = this.dataset.platform;
        });
      });

      // 文件上传
      const uploadArea = document.getElementById('uploadArea');
      const fileInput = document.getElementById('fileInput');
      const fileInfo = document.getElementById('fileInfo');
      const previewImage = document.getElementById('previewImage');
      const fileName = document.getElementById('fileName');
      const fileSize = document.getElementById('fileSize');
      const removeFile = document.getElementById('removeFile');
      const convertButton = document.getElementById('convertButton');
      const resultSection = document.getElementById('resultSection');
      const downloadLink = document.getElementById('downloadLink');

      // 节流防抖变量
      let isConverting = false;
      let lastConvertTime = 0;
      const DEBOUNCE_DELAY = 2000; // 2秒防抖延迟

      // 点击上传区域触发文件选择
      uploadArea.addEventListener('click', function () {
        fileInput.click();
      });

      // 拖放功能
      uploadArea.addEventListener('dragover', function (e) {
        e.preventDefault();
        uploadArea.style.borderColor = 'var(--primary-color)';
        uploadArea.style.backgroundColor = 'rgba(74, 110, 224, 0.05)';
      });

      uploadArea.addEventListener('dragleave', function () {
        uploadArea.style.borderColor = '#ced4da';
        uploadArea.style.backgroundColor = '#f8f9fa';
      });

      uploadArea.addEventListener('drop', function (e) {
        e.preventDefault();
        uploadArea.style.borderColor = '#ced4da';
        uploadArea.style.backgroundColor = '#f8f9fa';

        if (e.dataTransfer.files.length) {
          handleFile(e.dataTransfer.files[0]);
        }
      });

      // 文件选择处理
      fileInput.addEventListener('change', function () {
        if (this.files.length) {
          handleFile(this.files[0]);
        }
      });

      // 处理文件
      function handleFile(file) {
        // 检查文件类型
        const validTypes = ['image/png', 'image/jpeg', 'image/bmp'];
        const fileExtension = file.name.split('.').pop().toLowerCase();
        const validExtensions = ['png', 'jpg', 'jpeg', 'bmp'];
        
        if (!validTypes.includes(file.type) && !validExtensions.includes(fileExtension)) {
          alert('请上传PNG、JPG或BMP格式的图片文件');
          return;
        }

        // 显示文件信息
        fileName.textContent = file.name;
        fileSize.textContent = formatFileSize(file.size);

        // 预览图片
        const reader = new FileReader();
        reader.onload = function (e) {
          previewImage.src = e.target.result;
          fileInfo.style.display = 'block';
          convertButton.disabled = false;
        };
        reader.readAsDataURL(file);
      }

      // 删除文件
      removeFile.addEventListener('click', function () {
        fileInput.value = '';
        fileInfo.style.display = 'none';
        convertButton.disabled = true;
        resultSection.style.display = 'none';
      });

      // 转换按钮点击
      convertButton.addEventListener('click', function () {
        // 防抖检查
        const currentTime = Date.now();
        if (isConverting) {
          alert('正在转换中，请稍候...');
          return;
        }
        
        if (currentTime - lastConvertTime < DEBOUNCE_DELAY) {
          alert('连续多次相同操作过于频繁，耐心等待完成');
          return;
        }

        if (!fileInput.files.length) {
          alert('请先选择要转换的图片文件');
          return;
        }

        // 设置转换状态
        isConverting = true;
        lastConvertTime = currentTime;
        convertButton.disabled = true;
        convertButton.textContent = '转换中...';

        // 创建FormData对象
        const formData = new FormData();
        formData.append('file', fileInput.files[0]);
        formData.append('platform', selectedPlatform);

        // 发送请求到后端API
        fetch('/convert', {
          method: 'POST',
          body: formData
        })
        .then(response => response.json())
        .then(data => {
          if (data.success) {
            // 显示结果
            resultSection.style.display = 'block';
            
            // 获取下载链接容器
            const downloadContainer = document.getElementById('downloadContainer');
            if (!downloadContainer) {
              // 创建下载链接容器（如果不存在）
              const container = document.createElement('div');
              container.id = 'downloadContainer';
              downloadLink.parentNode.insertBefore(container, downloadLink.nextSibling);
            }
            
            // 处理新的API响应格式（支持多文件）
            if (data.download_urls && data.download_urls.length > 0) {
              // 如果有多个下载链接，创建一个包含所有链接的HTML
              let downloadHtml = '<div style="text-align: left; margin: 10px 0;">';
              downloadHtml += '<h4>可下载的图标文件：</h4>';
              downloadHtml += '<ul style="text-align: left;">';
              
              for (let i = 0; i < data.download_urls.length; i++) {
                const url = data.download_urls[i];
                const filename = data.filenames[i] || `图标文件 ${i+1}`;
                downloadHtml += `<li><a href="${url}" class="download-button" style="display: inline-block; margin: 5px 0;" download="${filename}">下载 ${filename}</a></li>`;
              }
              
              downloadHtml += '</ul></div>';
              
              // 更新容器内容而不是替换元素
              document.getElementById('downloadContainer').innerHTML = downloadHtml;
              // 隐藏原始下载链接
              downloadLink.style.display = 'none';
            } else if (data.download_url) {
              // 兼容旧的单文件格式
              downloadLink.href = data.download_url;
              downloadLink.textContent = `下载${getPlatformName(selectedPlatform)}图标`;
              downloadLink.style.display = 'inline-block';
              // 清空容器内容
              if (document.getElementById('downloadContainer')) {
                document.getElementById('downloadContainer').innerHTML = '';
              }
            } else {
              downloadLink.textContent = '下载链接不可用';
              downloadLink.style.display = 'inline-block';
              // 清空容器内容
              if (document.getElementById('downloadContainer')) {
                document.getElementById('downloadContainer').innerHTML = '';
              }
            }
            
            // 滚动到结果区域
            resultSection.scrollIntoView({ behavior: 'smooth' });
          } else {
            alert('转换失败: ' + data.error);
          }
        })
        .catch(error => {
          console.error('Error:', error);
          alert('转换过程中发生错误，请稍后重试');
        })
        .finally(() => {
          // 重置转换状态
          isConverting = false;
          convertButton.textContent = '开始转换';
          convertButton.disabled = false;
        });
      });

      // 辅助函数
      function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
      }

      function getPlatformName(platform) {
        switch (platform) {
          case 'win': return 'Windows';
          case 'mac': return 'Mac OS';
          case 'linux': return 'Linux';
          default: return '';
        }
      }
    });
  </script>
</body>

</html>